<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>砍价页面</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/kj.css">
</head>

<body>
    <div class="container">
        <div class="content">
            <div class="product">
                <div class="cover">
                    <img src="./img/911.png" id="cover">
                </div>
                <div class="info">
                    <h3 id="name1"></h3>
                    <p>
                        <span> 保险包邮</span>
                        <span> 正品保障</span>
                    </p>
                </div>
            </div>
            <p class="kj-tip">已砍<span id="already"></span> 元，还差<span id="remain"></span> 元</p>

            <div class="progress">
                <span class="value"></span>
            </div>

            <p class="youhui"><img src="./img/hb.png">帮我砍价有机会领取10~100元现金券</p>

            <button class="kyd-btn"> 老铁，帮我砍一刀 </button>
            <button class="free-btn hide" id="free-btn2"> 0元免费领取 </button>
        </div>
    </div>

    <div class="mask hide">
        <img src="./img/kyd.gif" class="kyd-ani">
        <canvas id="canvas" width="10rem" height="100%" class="hide"></canvas>

        <div class="success-page hide">
            <img src="./img/a1.jpeg" class="avatar">
            <p class="dialog">
                太感谢你了，帮我砍了 <span class="piece"></span>元！ <br>
                送你一件免费商品，越砍约容易哦
            </p>

            <div class="content">
                <div class="product">
                    <div class="cover">
                        <img src="./img/911.png" id="cover">
                    </div>
                    <div class="info">
                        <h3 id="name2"></h3>
                        <p>
                            <span> 保险包邮</span>
                            <span> 正品保障</span>
                        </p>
                    </div>
                </div>
                <p class="kj-tip">百亿补贴，万件商品免费拿</p>

                <button class="free-btn"> 0元免费领取 </button>
                
            </div>


        </div>
    </div>
    <audio src="./audio/kyd.mp3" id="kyd"></audio>
    <audio src="./audio/success.mp3" id="success"></audio>
    <script src="./lib/setrem.js"></script>
    <script src="./lib/jquery.js"></script>
    <script src="./lib/confetti.js"></script>
    <script>
       
        // 从当前链接中获取id
        let params = new URLSearchParams(location.search)
        let id = params.get('id')

         /** 获取商品信息 */
        $.get(`http://localhost:3000/goods?id=${id}`, function (res) {

            $('#cover').attr('src', res.url)
            $('#name1').html(res.name);
            $('#name2').html(res.name)
            $('#already').html((res.already).toFixed(2));
            $('#remain').html((res.total - res.already).toFixed(2));
            $('.value').css('width', (res.already / res.total) * 100 + '%')

            if ((res.total - res.already).toFixed(2) <= 0) {
                $(".kj-tip").html('砍价成功!')
                $(".mask").hide()
                $(".kyd-btn").hide()
                $("#free-btn2").show()
            }
        })


        /** 砍一刀 */
        let kydEffect = document.querySelector('#kyd')
        let successEffect = document.querySelector('#success')

        $('.kyd-btn').click(function () {
            console.log('砍一刀。。。')
            let mask = document.querySelector('.mask')
            mask.classList.remove('hide')
            // 砍一刀音效
            kydEffect.play()
            // 1秒中后移除mask，并且播放砍一刀成功音效
            setTimeout(() => {
                $('.kyd-ani').addClass('hide')
                $('#canvas').removeClass('hide')
                $('.success-page').addClass('show')

                kydEffect.currentTime = 0;
                successEffect.play()
            }, 1000)

            // 请求服务器，获取砍价的数据，后端会反回砍掉多少money的数据
            $.get(`http://localhost:3000/kyd?id=${id}`, function (res) {
                console.log(res.total - res.already)
                // 砍掉n元
                let piece = res.logs.pop().toFixed(2)
                $(".piece").html(piece)
                // 设置进度条
                $('.value').css('width', (res.already / res.total) * 100 + '%')

            })
        })

        // 发起一轮新的砍价
        $('.free-btn').click(function () {
            location.href = `${location.origin}/index.html?id=666`
        })
    </script>
</body>

</html>